<template>
    <div id="VJUpload">
        <el-upload
                :action="action"
                v-if="isTypeOf('multiple')"
                v-bind="combineConfig"
                :headers="headers"
                list-type="picture-card"
                :on-success="onUploadFileList.bind(this)"
                :on-remove="onRemoveFileList">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-upload
                :action="action"
                :show-file-list="false"
                :headers="headers"
                v-else
                v-bind="combineConfig"
                v-loading="loading"
                class="avatar-uploader"
                :before-upload="()=>loading=true"
                :on-error="onUploadError"
                :on-success="onUpload">
            <img :style="{background:bg!=null&&'#000'}" v-if="!Array.isArray(fakeValue)&&fakeValue" alt="" :src="fakeValue" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </div>
</template>
<script lang="ts">
    import Vue, {ComponentOptions, VueConstructor} from "vue"
    import Component, {mixins} from 'vue-class-component'
    import {FormMixin} from "./mixins/form-mixin";
    import {VInput, VUpload} from "./config/form";
    import {Prop, Watch} from "vue-property-decorator";
    import {defaultProp, ModelSync} from "vijay-util";
    import {Message} from "element-ui";
    import emitter from 'element-ui/src/mixins/emitter';

    @Component({
        mixins: [emitter],
    })
    export default class VJUpload extends mixins(FormMixin) implements ComponentOptions<Vue> {
        name = "VJUpload";
        loading = false;
        @Prop() cmp!: string;
        @Prop() bg!: boolean;
        @ModelSync(defaultProp([])) fakeValue!: any;
        get combineConfig() {
            return this.combineWith<VUpload.configType>(VUpload.config);
        }
        get action() {
            return Vue.$uploadPath
        }
        get headers() {
            const header = {"X-Access-Token": sessionStorage.getItem("X-Access-Token")};
            return header
        }
        onRemoveFileList(removed) {
            const file = removed.response?.file;
            const idx = this.fakeValue.findIndex((url) => file === url);
            if (idx < 0) return;
            this.fakeValue.split(idx, 1);
        }
        onUploadFileList(res) {
            if (!res?.message) return this.onUploadError();
            Array.isArray(this.fakeValue) || (this.fakeValue = []);
            this.fakeValue.push(res.message);
        }
        onUploadError() {
            this.loading = false
            return Message.error("上传失败！")
        }
        onUpload(res) {
            if (!res?.message) return this.onUploadError();
            this.fakeValue = res.message;
            this.loading = false;
            this.$emit("uploaded")
        }
        @Watch("fakeValue")
        valueChange() {
            this.dispatch('ElFormItem', 'el.form.blur', [this.fakeValue]);
        }
    }
</script>

<style lang="scss">

    #VJUpload {
        .avatar-uploader {
            display: inline-block;
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 120px;
            height: 120px;
            line-height: 120px;
            text-align: center;
        }
        .avatar {
            width: 120px;
            height: 120px;
            display: block;
            object-fit: contain;
        }
    }
</style>
